<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>联系人分类汇总报表</title>
    <style>
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            padding: 20px;
        }
        #pieChartDiv {
            width: 900px;
            height: 650px;
            margin: 30px auto;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
            border-radius: 12px;
            padding: 20px;
            background: white;
        }
        h2 {
            text-align: center;
            color: #2c3e50;
            font-weight: 300;
            font-size: 28px;
            margin: 30px 0 10px;
            letter-spacing: 1px;
        }
        .chart-container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .stats-box {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            margin-top: 20px;
            width: 80%;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .stats-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        .stats-label {
            color: #7f8c8d;
            font-weight: 500;
        }
        .stats-value {
            color: #2c3e50;
            font-weight: 600;
        }
    </style>
</head>
<body>
<div class="chart-container">
    <h2>联系人分类汇总分析</h2>

    <div id="pieChartDiv"></div>

    <div class="stats-box">
        <div class="stats-row">
            <span class="stats-label">总联系人数量:</span>
            <span class="stats-value" id="totalContacts">0</span>
        </div>
        <div class="stats-row">
            <span class="stats-label">分类数量:</span>
            <span class="stats-value" id="categoryCount">0</span>
        </div>
        <div class="stats-row">
            <span class="stats-label">最大分类:</span>
            <span class="stats-value" id="largestCategory">-</span>
        </div>
    </div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
    /*<![CDATA[*/
    // 示例数据 - 实际使用时可以替换为您的真实数据
    const dataCountByCategory = [
        {count: 45, name: "客户"},
        {count: 32, name: "供应商"},
        {count: 28, name: "合作伙伴"},
        {count: 19, name: "同事"},
        {count: 15, name: "朋友"},
        {count: 12, name: "家人"},
        {count: 8, name: "校友"},
        {count: 5, name: "其他"}
    ];

    // 计算统计数据
    const totalContacts = dataCountByCategory.reduce((sum, item) => sum + item.count, 0);
    const categoryCount = dataCountByCategory.length;
    const largestCategory = dataCountByCategory.reduce((max, item) =>
        item.count > max.count ? item : max, {count: 0, name: ""});

    // 更新统计信息
    document.getElementById('totalContacts').textContent = totalContacts;
    document.getElementById('categoryCount').textContent = categoryCount;
    document.getElementById('largestCategory').textContent =
        `${largestCategory.name} (${largestCategory.count}, ${Math.round(largestCategory.count/totalContacts*100)}%)`;

    // 高级配色方案
    const colorPalette = [
        '#4E79A7', '#F28E2B', '#E15759', '#76B7B2', '#59A14F',
        '#EDC948', '#B07AA1', '#FF9DA7', '#9C755F', '#BAB0AC',
        '#8CD17D', '#499894', '#86BCB6', '#F1CE63', '#D37295'
    ];

    // 处理数据
    const pieData = dataCountByCategory.map((item, index) => {
        return {
            name: item.name,
            value: item.count,
            itemStyle: {
                color: colorPalette[index % colorPalette.length]
            }
        };
    });

    // 初始化 ECharts 实例
    const pieChart = echarts.init(document.getElementById('pieChartDiv'));

    // 高级配置项
    const pieOption = {
        backgroundColor: 'transparent',
        title: {
            text: '联系人分类占比分析',
            subtext: `共计 ${totalContacts} 位联系人`,
            left: 'center',
            top: 20,
            textStyle: {
                color: '#2c3e50',
                fontSize: 18,
                fontWeight: 'normal'
            },
            subtextStyle: {
                color: '#7f8c8d',
                fontSize: 12
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: params => {
                return `
                <div style="font-weight:bold;color:${params.color}">${params.name}</div>
                <div>数量: ${params.value} (${params.percent}%)</div>
                <div>占比: 1:${Math.round(totalContacts/params.value)}</div>
                `;
            },
            backgroundColor: 'rgba(255,255,255,0.95)',
            borderColor: '#e0e0e0',
            borderWidth: 1,
            textStyle: {
                color: '#2c3e50'
            },
            extraCssText: 'box-shadow: 0 4px 12px rgba(0,0,0,0.12);border-radius: 6px;padding: 12px;'
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 30,
            top: 'center',
            data: pieData.map(item => item.name),
            textStyle: {
                color: '#7f8c8d',
                fontSize: 12
            },
            itemHeight: 12,
            itemWidth: 12,
            itemGap: 8,
            pageIconColor: '#4E79A7',
            pageTextStyle: {
                color: '#7f8c8d'
            }
        },
        series: [{
            name: '联系人分类',
            type: 'pie',
            radius: ['45%', '70%'],
            center: ['40%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 6,
                borderColor: '#fff',
                borderWidth: 2,
                shadowBlur: 8,
                shadowColor: 'rgba(0, 0, 0, 0.1)'
            },
            label: {
                show: true,
                formatter: '{b}: {d}%',
                fontSize: 12,
                color: '#2c3e50',
                fontWeight: 'normal'
            },
            emphasis: {
                scale: true,
                scaleSize: 10,
                itemStyle: {
                    shadowBlur: 16,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.2)'
                },
                label: {
                    show: true,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: true,
                length: 15,
                length2: 10,
                lineStyle: {
                    width: 1,
                    type: 'solid'
                }
            },
            data: pieData,
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            }
        }],
        graphic: [{
            type: 'text',
            left: 'center',
            top: '90%',
            style: {
                text: '数据更新时间: ' + new Date().toLocaleString(),
                fill: '#95a5a6',
                fontSize: 12
            }
        }]
    };

    // 使用配置项
    pieChart.setOption(pieOption);
    
    // 响应式调整
    window.addEventListener('resize', function() {
        pieChart.resize();
    });
    /*]]>*/
</script>
</body>
</html>